<template>
  <div >
    <!-- <div style="width: 100%; background-color: #636363; overflow: hidden">
      <span
        class="demonstration"
        style="padding-top: 50px; color: white; margin-left: 50px text-aligh:center"
      >
        网站首页
      </span>
    </div> --><!--网站首先的导航栏显示-->

    <div >
      <el-col :gutter="10">
        <el-row :xs="3" :sm="3" :md="3" :lg="3">
          <div>
            <el-menu
              default-active="1"
              background-color="black"
              class="el-menu-demo"
              active-text-color="orange"
              text-color="white"
              mode="horizontal"
              style="min-height: 2px;padding-left:41%;"
              @select="handleSelect"
            >
              <el-menu-item index="1"
                ><i class="el-icon-message"></i>首页</el-menu-item
              >
              <el-menu-item index="2"
                ><i class="el-icon-menu" ></i>规则介绍</el-menu-item
              >
              <el-menu-item index="3"
                ><i class="el-icon-menu"></i>自测</el-menu-item
              >
            </el-menu>
          </div>
        </el-row>
        <el-row :xs="20" :sm="20" :md="20" :lg="20">
          <!-- <div>
            <div
              style="
                border: 1px solid #a6a6a6;
                border-radius: 6px;
                padding: 5px;
                margin: 2px;
                background-color: white;
              "
            >
              <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for='item in breadcrumbItems' :key='item'>{{item}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div> -->
          <!--提示导航栏所在的位置-->

          <div style="margin-top: 2px;min-height:900px;background-color: #ebebeb; ">
            <router-view></router-view>
          </div>
        </el-row>
      </el-col>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      searchCriteria: '',
      breadcrumbItems: ['导航一']
    }
  },

  methods: {
    handleIconClick (ev) {
      console.log(ev)
    },

    handleSelect (key, keyPath) {
      switch (key) {
        case '1':
          this.$router.push('/page1')
          this.breadcrumbItems = ['导航一']
          break
        case '2':
          this.$router.push('/page2')
          this.breadcrumbItems = ['导航二']
          break
        case '3':
          this.$router.push('/page3')
          this.breadcrumbItems = ['导航三']
          break
      }
    }
  }
}
</script>
